<template>
  <div>
    <div class="thirdContainer" style="display: flex; flex-direction: column;">
      <div class="boxOne_third">
        <h2>第三方认证数据</h2>
      </div>

      <!--搜索产品-->
      <div class="boxTwo_approve" style="margin: 10px">
        <el-button type="primary" @click="exportThird">批量导出</el-button>
        <el-button @click="printOK">当前展示第三方认证的数据，请发送至第三方认证机构</el-button>
      </div>

      <!--产品信息展示——待审批和审批通过的产品-->
      <div class="boxThree_approve">
        <el-table class="table_pro" :data="proInfo" border stripe height="450"
                  :header-cell-style="{ backgroundColor:'aliceblue ', color:'#666' }">
          <el-table-column
              type="selection"
              width="55"
              align="center">
          </el-table-column>
          <el-table-column prop="id" label="产品ID"></el-table-column>
          <el-table-column prop="proName" label="产品名称"></el-table-column>
          <el-table-column prop="authName" label="认证名称"></el-table-column>
          <el-table-column prop="startDate" label="开始日期"></el-table-column>
          <el-table-column prop="deadline" label="截止日期"></el-table-column>
          <el-table-column prop="proStatus" label="产品状态"></el-table-column>
          <el-table-column prop="charger" label="负责人"></el-table-column>
          <el-table-column prop="notes" label="备注"></el-table-column>

        </el-table>
      </div>

    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "ThirdParty",

  data() {
    return {
      proInfo: [], //需要第三方认证的产品信息

    }
  },

  methods : {
    exportThird(){//批量导出需要第三方认证的产品信息
      window.open('http://localhost:8080/file/exportThird')
    },

    printOK(){
      this.$message.success("好的! 我明白了!")
    },


  },

  mounted(){ //获取需要第三方认证的数据
    request.get('/product/selectThirdParty').then(res => {
      this.proInfo = res.data
    })
  }
}
</script>

<style scoped>
.boxOne_third{
  height: 70%;
  background-color: #cccccc; /* 仅用于视觉效果 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 5px;
}

.boxThree_approve{
  padding-top: 20px;
  flex: 1;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

</style>